<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>00_函数防抖和节流</title>
</head>

<body>
  <!-- 
    函数防抖和节流
      + 两种处理 重复高频触发事件的方式

      防抖
        在单位时间内, 如果重复出现同样的事件, 那么把前一次干掉
      节流
        在单位时间内只能触发一次
        开关思想
  -->



  <input type="text">


  <!-- 原始的 -->
  <!-- <script>
    const inp = document.querySelector('input');
    inp.oninput = function() {
      console.log(`我要搜索的内容是: ${this.value}`)
    }
  </script> -->


  <!-- 防抖 -->
  <!-- <script>
    // 1. 函数防抖
    // 准备一个变量接收定时器返回值
    let timer = null;

    const inp = document.querySelector('input');
    inp.oninput = function() {
      console.log('上一次定时器:', timer);

      // 每一次执行这个事件的时候, 都关闭一次定时器
      clearInterval(timer);

      // 把本来应该立即执行的事情, 延后执行
      timer = setTimeout(() => {
        console.log(`我要搜索的内容是: ${this.value}`);
      }, 1000)

      console.log('新开定时器:', timer);
    };
  </script> -->


  <!-- 节流 -->
  <!-- <script>
    // 2. 函数节流
    // 准备节流开关
    // 开关为 true 的时候, 表示是开启的
    // 开关为 false 的时候, 表示是关闭的
    let flag = true;
    
    const inp = document.querySelector('input');
    inp.oninput = function() {
      if (!flag) return
      // 代码能执行到这里, 说明开关是开启的
      // 把它关上
      flag = false;
      console.log(`我要搜索的内容是: ${this.value}`)

      // 设置单位时间以后, 将开关打开
      setTimeout( () => flag = true, 1000)
    };
  </script> -->
</body>
</html>
